<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form  layout="inline" @keyup.enter.native="addPCB">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="制令单">
              <a-input placeholder="请扫描/输入制令单" v-model="addObj.commandCode" allowClear></a-input>
            </a-form-item>
          </a-col>
         <a-col :xl="6" :lg="7" :md="8" :sm="24">
           <a-form-item label="批量">
             <a-input placeholder="请扫描/输入批量" v-model="addObj.batchNum" allowClear></a-input>
           </a-form-item>
         </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="PCB">
              <a-input placeholder="请扫描/输入PCB板" v-model="addObj.scanContent" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="正反面">
              <a-select v-model="addObj.query3" @change="handleChange">
                <a-select-option value="正面">
                  正面
                </a-select-option>
                <a-select-option value="反面">
                  反面
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        size="middle"
        bordered
        rowKey="scanContent"
        :columns="columns"
        :dataSource="dataSource"
        class="j-table-force-nowrap">
      </a-table>
    </div>
  </a-card>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import pick from 'lodash.pick'

  export default {
    /** PCB扫描页面 **/
    name: "MesPCBThreadScanning",
    data () {
      return {
        addObj:{
          commandCode:'',
          batchNum:'1',
          scanContent:'',
          query3:'正面'
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'制令单号',
            align:"center",
            dataIndex: 'commandCode'
          },
          {
            title:'批量*连扳数',
            align:"center",
            dataIndex: 'batchNum'
          },
          {
            title:'PCB号',
            align:"center",
            dataIndex: 'scanContent'
          },
        ],
        dataSource:[],
      }
    },
    methods: {
      handleChange(value) {
        console.log(1111,this.addObj.query3)
      },
      testObj(){
        let state = true
        let content = ''
        if (!this.addObj.commandCode){
          state = false
          content = '请扫描或输入制令单号'
        }else if (!this.addObj.batchNum){
          state = false
          content = '请扫描或输入批量号'
        }else if (!this.addObj.scanContent){
          state = false
          content = '请扫描或输入PCB号'
        }else if (!this.addObj.query3){
          state = false
          content = '请选择正反面'
        }
        if (!state){
          this.$error({
            title: '提示',
            content: content,
            okText: '确认',
          });
        }
        return state
      },
      addPCB(){
        let obj = {...this.addObj}
        if(this.testObj()){
          let that = this
          this.addObj.scanContent = ''
          httpAction('produce/mesCourseScan/add',obj,'post').then((res)=>{
            // this.addObj.scanContent = ''
            if(res.success){
              that.$message.success('操作成功！');
              if (this.dataSource.length === 10) {
                this.dataSource.splice(9, 1);
                this.dataSource.unshift(obj);
              } else {
                this.dataSource.unshift(obj);
              }
            }else{
              that.$message.warning(res.message);
            }
          })
        }
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>